<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.1">
  <link rel="apple-touch-icon" sizes="180x180" href="/webpack/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/webpack/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/webpack/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/webpack/images/logo.svg" color="#222">

<link rel="stylesheet" href="/webpack/css/main.css">


<link rel="stylesheet" href="/webpack/lib/font-awesome/css/font-awesome.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"yoursite.com","root":"/webpack/","scheme":"Muse","version":"7.7.2","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta name="description" content="快速上手 webpack核心概念  entry: 入口, webpack执行构建的第一步将从entry开始,可以抽象成输入 output: 输出结果，在webpack经过一系列处理并得出最终想要的代码后输出的结果 module:  模块, 在webpack里，一切皆模块，一个模块对应着一个文件。webpack会冲入口开始递归找出所有依赖的模块 loader: 模块转换器，默认情况下，webpack">
<meta property="og:type" content="article">
<meta property="og:title" content="webpack-basic&#x2F;体验webpack">
<meta property="og:url" content="http://yoursite.com/2020/11/25/webpack-basic/%E4%BD%93%E9%AA%8Cwebpack/index.html">
<meta property="og:site_name" content="webpack">
<meta property="og:description" content="快速上手 webpack核心概念  entry: 入口, webpack执行构建的第一步将从entry开始,可以抽象成输入 output: 输出结果，在webpack经过一系列处理并得出最终想要的代码后输出的结果 module:  模块, 在webpack里，一切皆模块，一个模块对应着一个文件。webpack会冲入口开始递归找出所有依赖的模块 loader: 模块转换器，默认情况下，webpack">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-11-25T04:58:17.753Z">
<meta property="article:modified_time" content="2020-11-25T11:55:48.325Z">
<meta property="article:author" content="HC">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="http://yoursite.com/2020/11/25/webpack-basic/%E4%BD%93%E9%AA%8Cwebpack/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'en'
  };
</script>

  <title>webpack-basic/体验webpack | webpack</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <div>
      <a href="/webpack/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">webpack</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>


<nav class="site-nav">
  
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/webpack/" rel="section"><i class="fa fa-fw fa-home"></i>Home</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/webpack/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>Archives</a>

  </li>
  </ul>

</nav>
</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content">
            

  <div class="posts-expand">
      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block " lang="en">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/11/25/webpack-basic/%E4%BD%93%E9%AA%8Cwebpack/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/webpack/images/avatar.gif">
      <meta itemprop="name" content="HC">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="webpack">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          webpack-basic/体验webpack
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>
              

              <time title="Created: 2020-11-25 12:58:17 / Modified: 19:55:48" itemprop="dateCreated datePublished" datetime="2020-11-25T12:58:17+08:00">2020-11-25</time>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="快速上手"><a href="#快速上手" class="headerlink" title="快速上手"></a>快速上手</h1><ul>
<li><p>webpack核心概念</p>
<ul>
<li>entry: 入口, webpack执行构建的第一步将从entry开始,可以抽象成输入</li>
<li>output: 输出结果，在webpack经过一系列处理并得出最终想要的代码后输出的结果</li>
<li>module:  模块, 在webpack里，一切皆模块，一个模块对应着一个文件。webpack会冲入口开始递归找出所有依赖的模块</li>
<li>loader: 模块转换器，默认情况下，webpack只能处理以js和json结尾的文件，如果想要解析其他后缀的文件，需要使用loader来处理</li>
<li>plugin: 扩展插件，如果说loader是用来解析模块的，插件的功能更加强大，插件贯穿webpack打包的 整个过程，在特定时机注入扩展逻辑来改变构建结果或做你想要做的事</li>
<li>chuck: 代码块，一个Chunk有多个模块组合而成，用于代码合并于分隔</li>
<li>context: 项目打包的路径上下文，如果指定了context, 那么entry和output都是相对于上下文的，context必须是一个绝对路径</li>
</ul>
</li>
<li><p>打包流程</p>
<ul>
<li>webpack启动后会从Entry里配置的Module开始递归解析Entry依赖的所有Module。每找到一个module,就会根据配置的loader去找出对应的转换规则，对module进行转换后，再解析出当前module依赖的module。这些模块会以Entry为单位进行分组，一个Entry和其所有依赖的Module被分到一个组，也就是一个<strong>Chunk</strong>。最后webpack会把所有chunk转换成文件输出。在整个流程中wepback会在强档的时机执行plugin里定义的逻辑</li>
</ul>
</li>
<li><p>初始化项目</p>
</li>
</ul>
<figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">mkdir my<span class="literal">-wepback</span> // 创建目录</span><br><span class="line">cd my<span class="literal">-webpack</span> // 进入目录</span><br><span class="line">npm init <span class="literal">-y</span>  // 初始化项目</span><br></pre></td></tr></table></figure>

<ul>
<li><p>配置webpack</p>
<figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm installl webpack webpack<span class="literal">-cli</span> <span class="literal">-D</span>   // 安装依赖  webpack<span class="literal">-cli</span>是命令行工具</span><br></pre></td></tr></table></figure>
</li>
<li><p>创建src目录</p>
<figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mkdir src</span><br></pre></td></tr></table></figure>
</li>
<li><p>新建src/index.js</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">'hello, webpack'</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>配置package.json中的<code>script</code>字段</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">"scripts": &#123;</span><br><span class="line">   "build": "webpack"</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
</li>
<li><p>在命令行执行 <code>npm run build</code>, 就在当前目录下生成了dist目录，这是零配置进行打包，但是，这样比较的缺乏活力，因此，我们需要新建一个webpack打包的配置文件</p>
</li>
<li><p>在项目下，新建 <code>webpack.config.js</code></p>
</li>
<li><p>webpack.config.js中的一些核心配置</p>
<ul>
<li>mode: 开发模式，一般式 development或者式production</li>
<li>context: 上下文，entry和outpue的路径会基于context</li>
<li>entry: 打包的入口</li>
<li>output: 打包输出</li>
<li>module: 打包有关loader等的配置</li>
<li>plugins: 插件</li>
</ul>
</li>
<li><p>配置webpack.config.js</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</span><br><span class="line"><span class="comment">// 解析路径，返回绝对路径</span></span><br><span class="line"><span class="keyword">const</span> resolve = <span class="function">(<span class="params">...paths</span>) =&gt;</span> path.resolve(__dirname, ...paths)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode: <span class="string">'development'</span>,</span><br><span class="line">    context: process.cwd(),</span><br><span class="line">    entry: resolve(<span class="string">'src'</span>, <span class="string">'main.js'</span>),</span><br><span class="line">    output: &#123;</span><br><span class="line">        path: resolve(<span class="string">'dist'</span>),</span><br><span class="line">        filename: <span class="string">'index.js'</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h2 id="自动产出html"><a href="#自动产出html" class="headerlink" title="自动产出html"></a>自动产出html</h2><ol>
<li><p>安装依赖  <code>cnpm install html-webpack-plugin -D</code></p>
</li>
<li><p>新建public/index.html</p>
</li>
<li><p>配置loader</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</span><br><span class="line"><span class="comment">// 解析路径，返回绝对路径</span></span><br><span class="line">+ <span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>);</span><br><span class="line"><span class="keyword">const</span> resolve = <span class="function">(<span class="params">...paths</span>) =&gt;</span> path.resolve(__dirname, ...paths)</span><br><span class="line"><span class="built_in">console</span>.log(process.cwd());</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode: <span class="string">'development'</span>,</span><br><span class="line">    context: process.cwd(),</span><br><span class="line">    entry: resolve(<span class="string">'src'</span>, <span class="string">'index.js'</span>),</span><br><span class="line">    output: &#123;</span><br><span class="line">        path: resolve(<span class="string">'dist'</span>),</span><br><span class="line">        filename: <span class="string">'index.js'</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: []</span><br><span class="line">    &#125;,</span><br><span class="line">    plugins: [</span><br><span class="line">   +      <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">   +         template: resolve(<span class="string">'public'</span>, <span class="string">'index.html'</span>), <span class="comment">// 模板路径</span></span><br><span class="line">   +        filename: <span class="string">'index.html'</span> <span class="comment">// 输出文件名</span></span><br><span class="line">        &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

</li>
</ol>
<h2 id="支持css-scss-less"><a href="#支持css-scss-less" class="headerlink" title="支持css, scss, less"></a>支持css, scss, less</h2><p>前面说过，webpack只支持js和json后缀的文件，因此向css, scss, less后缀的文件模块，需要loader来解析</p>
<ul>
<li><p>支持css</p>
<ol>
<li><p>安装依赖  <code>cnpm install css-loader style-loader</code></p>
</li>
<li><p>在src下新建 assets/index.css</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



</li>
</ol>
</li>
</ul>
<ol start="3">
<li><p>在入口index.js引入index.css</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">'./assets/index.css'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'hello webpack'</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>配置loader</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</span><br><span class="line"><span class="comment">// 解析路径，返回绝对路径</span></span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>);</span><br><span class="line"><span class="keyword">const</span> resolve = <span class="function">(<span class="params">...paths</span>) =&gt;</span> path.resolve(__dirname, ...paths)</span><br><span class="line"><span class="built_in">console</span>.log(process.cwd());</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode: <span class="string">'development'</span>,</span><br><span class="line">    context: process.cwd(),</span><br><span class="line">    entry: resolve(<span class="string">'src'</span>, <span class="string">'index.js'</span>),</span><br><span class="line">    output: &#123;</span><br><span class="line">        path: resolve(<span class="string">'dist'</span>),</span><br><span class="line">        filename: <span class="string">'index.js'</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: [&#123;</span><br><span class="line">+            test: <span class="regexp">/\.css$/</span>,</span><br><span class="line">+            use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>] <span class="comment">// loader执行是有顺序的，从右往左执行, css-loader的作用是解析css, style-loader的作用是将解析得到的css样式查到style标签中</span></span><br><span class="line">        &#125;]</span><br><span class="line">    &#125;,</span><br><span class="line">    plugins: [</span><br><span class="line">        <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">            template: resolve(<span class="string">'public'</span>, <span class="string">'index.html'</span>),</span><br><span class="line">            filename: <span class="string">'index.html'</span></span><br><span class="line">        &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

</li>
</ol>
<ul>
<li><p>支持less</p>
<ol>
<li><p>安装依赖 <code>cnpm install less less-loader</code></p>
</li>
<li><p>在assets下新建 index.less</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@color:</span> <span class="number">#000</span>;</span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="variable">@color</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>在index.js引入index.less</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// import './assets/index.css';</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'./assets/index.less'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'hello webpack'</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>配置loader</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</span><br><span class="line"><span class="comment">// 解析路径，返回绝对路径</span></span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>);</span><br><span class="line"><span class="keyword">const</span> resolve = <span class="function">(<span class="params">...paths</span>) =&gt;</span> path.resolve(__dirname, ...paths)</span><br><span class="line"><span class="built_in">console</span>.log(process.cwd());</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode: <span class="string">'development'</span>,</span><br><span class="line">    context: process.cwd(),</span><br><span class="line">    entry: resolve(<span class="string">'src'</span>, <span class="string">'index.js'</span>),</span><br><span class="line">    output: &#123;</span><br><span class="line">        path: resolve(<span class="string">'dist'</span>),</span><br><span class="line">        filename: <span class="string">'index.js'</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: [&#123;</span><br><span class="line">            test: <span class="regexp">/\.css$/</span>,</span><br><span class="line">            use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>] <span class="comment">// loader执行是有顺序的，从右往左执行, css-loader的作用是解析css, style-loader的作用是将解析得到的css样式查到style标签中</span></span><br><span class="line">        &#125;,</span><br><span class="line">+        &#123;</span><br><span class="line">+           test: <span class="regexp">/\.less$/</span>,</span><br><span class="line">+           use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>, <span class="string">'less-loader'</span>]</span><br><span class="line">+        &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;,</span><br><span class="line">    plugins: [</span><br><span class="line">        <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">            template: resolve(<span class="string">'public'</span>, <span class="string">'index.html'</span>),</span><br><span class="line">            filename: <span class="string">'index.html'</span></span><br><span class="line">        &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
</li>
<li><p>支持scss</p>
<ol>
<li><p>安装依赖  <code>cnpm install sass-loader node-sass -D</code></p>
</li>
<li><p>新建assets/index.scss</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">$background</span>: <span class="number">#008c8c</span>;</span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="variable">$background</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>在index.js引入index.scss</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// import './assets/index.css';</span></span><br><span class="line"><span class="comment">// import './assets/index.less';</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'./assets/index.scss'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'hello webpack'</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>配置loader</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</span><br><span class="line"><span class="comment">// 解析路径，返回绝对路径</span></span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>);</span><br><span class="line"><span class="keyword">const</span> resolve = <span class="function">(<span class="params">...paths</span>) =&gt;</span> path.resolve(__dirname, ...paths)</span><br><span class="line"><span class="built_in">console</span>.log(process.cwd());</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode: <span class="string">'development'</span>,</span><br><span class="line">    context: process.cwd(),</span><br><span class="line">    entry: resolve(<span class="string">'src'</span>, <span class="string">'index.js'</span>),</span><br><span class="line">    output: &#123;</span><br><span class="line">        path: resolve(<span class="string">'dist'</span>),</span><br><span class="line">        filename: <span class="string">'index.js'</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: [&#123;</span><br><span class="line">            test: <span class="regexp">/\.css$/</span>,</span><br><span class="line">            use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>] <span class="comment">// loader执行是有顺序的，从右往左执行, css-loader的作用是解析css, style-loader的作用是将解析得到的css样式查到style标签中</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            test: <span class="regexp">/\.less$/</span>,</span><br><span class="line">            use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>, <span class="string">'less-loader'</span>]</span><br><span class="line">        &#125;,</span><br><span class="line">+        &#123;</span><br><span class="line">+            test: <span class="regexp">/\.scss$/</span>,</span><br><span class="line">+            use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>, <span class="string">'sass-loader'</span>]</span><br><span class="line">+        &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;,</span><br><span class="line">    plugins: [</span><br><span class="line">        <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">            template: resolve(<span class="string">'public'</span>, <span class="string">'index.html'</span>),</span><br><span class="line">            filename: <span class="string">'index.html'</span></span><br><span class="line">        &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

</li>
</ol>
</li>
</ul>
<h2 id="配置开发服务器"><a href="#配置开发服务器" class="headerlink" title="配置开发服务器"></a>配置开发服务器</h2><ol>
<li><p>安装依赖 <code>cnpm install webpack-dev-server -D</code></p>
</li>
<li><p>配置package.json中的scripts脚本</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">"scripts": &#123;</span><br><span class="line">  "build": "webpack",</span><br><span class="line">  "dev": "webpack serve" // webpack5 不用写webpack-dev-server了</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
</li>
<li><p>配置webpack.config.js</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</span><br><span class="line"><span class="comment">// 解析路径，返回绝对路径</span></span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>);</span><br><span class="line"><span class="keyword">const</span> resolve = <span class="function">(<span class="params">...paths</span>) =&gt;</span> path.resolve(__dirname, ...paths)</span><br><span class="line"><span class="built_in">console</span>.log(process.cwd());</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode: <span class="string">'development'</span>,</span><br><span class="line">    context: process.cwd(),</span><br><span class="line">    entry: resolve(<span class="string">'src'</span>, <span class="string">'index.js'</span>),</span><br><span class="line">    output: &#123;</span><br><span class="line">        path: resolve(<span class="string">'dist'</span>),</span><br><span class="line">        filename: <span class="string">'index.js'</span>,</span><br><span class="line">        <span class="comment">// publicPath: '/assets' // 引入资源的路径上加上/assets    这里就在index.html上加 &lt;script src='/asssets/index.js'&gt;&lt;/script&gt;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: [&#123;</span><br><span class="line">            test: <span class="regexp">/\.css$/</span>,</span><br><span class="line">            use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>] <span class="comment">// loader执行是有顺序的，从右往左执行, css-loader的作用是解析css, style-loader的作用是将解析得到的css样式查到style标签中</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            test: <span class="regexp">/\.less$/</span>,</span><br><span class="line">            use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>, <span class="string">'less-loader'</span>]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            test: <span class="regexp">/\.scss$/</span>,</span><br><span class="line">            use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>, <span class="string">'sass-loader'</span>]</span><br><span class="line">        &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;,</span><br><span class="line">  + devServer: &#123;</span><br><span class="line">  +     <span class="comment">// 服务器额外的静态文件, 如打开的是http://localhost:3002 加入public下有a.txt index.html, 就可以通过 http://localhost:3002/a.txt(index.html) 访问这个静态资源了   </span></span><br><span class="line">  +     contentBase: resolve(<span class="string">'public'</span>),</span><br><span class="line">  +     <span class="comment">// publicPath: 'http://localhost:3002/assets', // 打包后的资源的访问基址  加入打包生成的文件夹dist下, 有main.js, index.html, 那么通过http://localhost:3002/assets/main.js访问, 不写默认是 /</span></span><br><span class="line">  +     open: <span class="literal">true</span>, <span class="comment">// 自动打开网页</span></span><br><span class="line">  +     compress: <span class="literal">true</span>, <span class="comment">// 开启压缩</span></span><br><span class="line">  +     host: <span class="string">'localhost'</span>, <span class="comment">// 域名</span></span><br><span class="line">  +     port: <span class="number">3002</span>, <span class="comment">// 端口</span></span><br><span class="line">  +     writeToDisk: <span class="literal">true</span> <span class="comment">// 在当前目录也生成一份打包到内存的文件， 方便查看打包后的结果</span></span><br><span class="line">  + &#125;,</span><br><span class="line">    plugins: [</span><br><span class="line">        <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">            template: resolve(<span class="string">'public'</span>, <span class="string">'index.html'</span>),</span><br><span class="line">            filename: <span class="string">'index.html'</span></span><br><span class="line">        &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

</li>
</ol>
<h2 id="支持图片"><a href="#支持图片" class="headerlink" title="支持图片"></a>支持图片</h2><ol>
<li><p>安装依赖 <code>cnpm install file-loader url-loade -D</code></p>
<p>flie-loader和url-loader的功能相似， url-loader是file-loader的加强版, 可以只当limit选项，当图片大小不超过这个时，图片以base64编码输出嵌入页面</p>
</li>
<li><p>新建 assets/images/1.jpg   </p>
<p>在js中引入图片 或者 引入在css中使用图片，都行</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> src <span class="keyword">from</span> <span class="string">'./assets/images/1.jpg'</span></span><br><span class="line"><span class="keyword">const</span> img = <span class="keyword">new</span> Image();</span><br><span class="line">img.src = src;</span><br><span class="line"><span class="built_in">document</span>.body.appendChild(img);</span><br></pre></td></tr></table></figure>
</li>
<li><p>配置loader</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</span><br><span class="line"><span class="comment">// 解析路径，返回绝对路径</span></span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>);</span><br><span class="line"><span class="keyword">const</span> resolve = <span class="function">(<span class="params">...paths</span>) =&gt;</span> path.resolve(__dirname, ...paths)</span><br><span class="line"><span class="built_in">console</span>.log(process.cwd());</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode: <span class="string">'development'</span>,</span><br><span class="line">    context: process.cwd(),</span><br><span class="line">    entry: resolve(<span class="string">'src'</span>, <span class="string">'index.js'</span>),</span><br><span class="line">    output: &#123;</span><br><span class="line">        path: resolve(<span class="string">'dist'</span>),</span><br><span class="line">        filename: <span class="string">'index.js'</span>,</span><br><span class="line">        <span class="comment">// publicPath: '/assets' // 引入资源的路径上加上/assets 比如img, js等    这里就在index.html上加 &lt;script src='/asssets/index.js'&gt;&lt;/script&gt;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: [&#123;</span><br><span class="line">            test: <span class="regexp">/\.css$/</span>,</span><br><span class="line">            use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>] <span class="comment">// loader执行是有顺序的，从右往左执行, css-loader的作用是解析css, style-loader的作用是将解析得到的css样式查到style标签中</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            test: <span class="regexp">/\.less$/</span>,</span><br><span class="line">            use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>, <span class="string">'less-loader'</span>]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            test: <span class="regexp">/\.scss$/</span>,</span><br><span class="line">            use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>, <span class="string">'sass-loader'</span>]</span><br><span class="line">        &#125;,</span><br><span class="line">        +&#123;</span><br><span class="line">        +    test: <span class="regexp">/\.(jpe?g| png | gif)/</span>,</span><br><span class="line">        +    use: [</span><br><span class="line">        +        &#123;</span><br><span class="line">        +            loader: <span class="string">'url-loader'</span>,</span><br><span class="line">        +            <span class="comment">// 39.4 KB</span></span><br><span class="line">        +            options: &#123;</span><br><span class="line">        +                limit: <span class="number">40</span> * <span class="number">1024</span> </span><br><span class="line">        +            &#125; </span><br><span class="line">        +        &#125;</span><br><span class="line">        +    ]</span><br><span class="line">        +&#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;,</span><br><span class="line">    devServer: &#123;</span><br><span class="line">        <span class="comment">// 服务器额外的静态文件, 如打开的是http://localhost:3002 加入public下有a.txt index.html, 就可以通过 http://localhost:3002/a.txt(index.html) 访问这个静态资源了   </span></span><br><span class="line">        contentBase: resolve(<span class="string">'public'</span>),</span><br><span class="line">        <span class="comment">// publicPath: 'assets', // 打包后的资源的访问基址  加入打包生成的文件夹dist下, 有main.js, index.html, 那么通过http://localhost:3002/assets/main.js访问, 不写默认是 /</span></span><br><span class="line">        open: <span class="literal">true</span>, <span class="comment">// 自动打开网页</span></span><br><span class="line">        compress: <span class="literal">true</span>, <span class="comment">// 开启压缩</span></span><br><span class="line">        host: <span class="string">'localhost'</span>, <span class="comment">// 域名</span></span><br><span class="line">        port: <span class="number">3002</span>, <span class="comment">// 端口</span></span><br><span class="line">        writeToDisk: <span class="literal">false</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins: [</span><br><span class="line">        <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">            template: resolve(<span class="string">'public'</span>, <span class="string">'index.html'</span>),</span><br><span class="line">            filename: <span class="string">'index.html'</span></span><br><span class="line">        &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

</li>
</ol>
<h2 id="分离css"><a href="#分离css" class="headerlink" title="分离css"></a>分离css</h2><ol>
<li><p>安装依赖  <code>cnpm install mini-css-extract-plugin -D</code></p>
</li>
<li><p>配置webpack.config.js</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</span><br><span class="line"><span class="comment">// 解析路径，返回绝对路径</span></span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>);</span><br><span class="line">+ <span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">'mini-css-extract-plugin'</span>);</span><br><span class="line"><span class="keyword">const</span> resolve = <span class="function">(<span class="params">...paths</span>) =&gt;</span> path.resolve(__dirname, ...paths)</span><br><span class="line"><span class="built_in">console</span>.log(process.cwd());</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode: <span class="string">'development'</span>,</span><br><span class="line">    context: process.cwd(),</span><br><span class="line">    entry: resolve(<span class="string">'src'</span>, <span class="string">'index.js'</span>),</span><br><span class="line">    output: &#123;</span><br><span class="line">        path: resolve(<span class="string">'dist'</span>),</span><br><span class="line">        filename: <span class="string">'index.js'</span>,</span><br><span class="line">        <span class="comment">// publicPath: '/assets' // 引入资源的路径上加上/assets 比如img, js等    这里就在index.html上加 &lt;script src='/asssets/index.js'&gt;&lt;/script&gt;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: [&#123;</span><br><span class="line">            test: <span class="regexp">/\.css$/</span>,</span><br><span class="line">           + use: [MiniCssExtractPlugin.loader, <span class="string">'css-loader'</span>] <span class="comment">// loader执行是有顺序的，从右往左执行, css-loader的作用是解析css, style-loader的作用是将解析得到的css样式查到style标签中</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            test: <span class="regexp">/\.less$/</span>,</span><br><span class="line">            use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>, <span class="string">'less-loader'</span>]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            test: <span class="regexp">/\.scss$/</span>,</span><br><span class="line">            use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>, <span class="string">'sass-loader'</span>]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            test: <span class="regexp">/\.(jpe?g| png | gif)/</span>,</span><br><span class="line">            use: [</span><br><span class="line">                &#123;</span><br><span class="line">                    loader: <span class="string">'url-loader'</span>,</span><br><span class="line">                    <span class="comment">// 39.4 KB</span></span><br><span class="line">                    options: &#123;</span><br><span class="line">                        <span class="comment">// limit: 40 * 1024 </span></span><br><span class="line">                    &#125; </span><br><span class="line">                &#125;</span><br><span class="line">            ]</span><br><span class="line">        &#125;,</span><br><span class="line">        ]</span><br><span class="line">    &#125;,</span><br><span class="line">    devServer: &#123;</span><br><span class="line">        <span class="comment">// 服务器额外的静态文件, 如打开的是http://localhost:3002 加入public下有a.txt index.html, 就可以通过 http://localhost:3002/a.txt(index.html) 访问这个静态资源了   </span></span><br><span class="line">        contentBase: resolve(<span class="string">'public'</span>),</span><br><span class="line">        <span class="comment">// publicPath: 'assets', // 打包后的资源的访问基址  加入打包生成的文件夹dist下, 有main.js, index.html, 那么通过http://localhost:3002/assets/main.js访问, 不写默认是 /</span></span><br><span class="line">        open: <span class="literal">true</span>, <span class="comment">// 自动打开网页</span></span><br><span class="line">        compress: <span class="literal">true</span>, <span class="comment">// 开启压缩</span></span><br><span class="line">        host: <span class="string">'localhost'</span>, <span class="comment">// 域名</span></span><br><span class="line">        port: <span class="number">3002</span>, <span class="comment">// 端口</span></span><br><span class="line">        writeToDisk: <span class="literal">false</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins: [</span><br><span class="line">        <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">            template: resolve(<span class="string">'public'</span>, <span class="string">'index.html'</span>),</span><br><span class="line">            filename: <span class="string">'index.html'</span></span><br><span class="line">        &#125;),</span><br><span class="line">        + <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">        +     filename: <span class="string">'index.css'</span></span><br><span class="line">        + &#125;)</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

</li>
</ol>
<h2 id="支持打包前清除dist目录"><a href="#支持打包前清除dist目录" class="headerlink" title="支持打包前清除dist目录"></a>支持打包前清除dist目录</h2><ol>
<li><p>安装依赖 <code>cnpm install clean-webpack-plugin -D</code></p>
</li>
<li><p>配置webpack.config.js</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</span><br><span class="line"><span class="comment">// 解析路径，返回绝对路径</span></span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>);</span><br><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">'mini-css-extract-plugin'</span>);</span><br><span class="line">+ <span class="keyword">const</span> &#123; CleanWebpackPlugin &#125; = <span class="built_in">require</span>(<span class="string">'clean-webpack-plugin'</span>);</span><br><span class="line"><span class="keyword">const</span> resolve = <span class="function">(<span class="params">...paths</span>) =&gt;</span> path.resolve(__dirname, ...paths)</span><br><span class="line"><span class="built_in">console</span>.log(process.cwd());</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode: <span class="string">'development'</span>,</span><br><span class="line">    context: process.cwd(),</span><br><span class="line">    entry: resolve(<span class="string">'src'</span>, <span class="string">'index.js'</span>),</span><br><span class="line">    output: &#123;</span><br><span class="line">        path: resolve(<span class="string">'dist'</span>),</span><br><span class="line">        filename: <span class="string">'index.js'</span>,</span><br><span class="line">        <span class="comment">// publicPath: '/assets' // 引入资源的路径上加上/assets 比如img, js等    这里就在index.html上加 &lt;script src='/asssets/index.js'&gt;&lt;/script&gt;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: [&#123;</span><br><span class="line">            test: <span class="regexp">/\.css$/</span>,</span><br><span class="line">            use: [MiniCssExtractPlugin.loader, <span class="string">'css-loader'</span>] <span class="comment">// loader执行是有顺序的，从右往左执行, css-loader的作用是解析css, style-loader的作用是将解析得到的css样式查到style标签中</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            test: <span class="regexp">/\.less$/</span>,</span><br><span class="line">            use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>, <span class="string">'less-loader'</span>]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            test: <span class="regexp">/\.scss$/</span>,</span><br><span class="line">            use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>, <span class="string">'sass-loader'</span>]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            test: <span class="regexp">/\.(jpe?g| png | gif)/</span>,</span><br><span class="line">            use: [</span><br><span class="line">                &#123;</span><br><span class="line">                    loader: <span class="string">'url-loader'</span>,</span><br><span class="line">                    <span class="comment">// 39.4 KB</span></span><br><span class="line">                    options: &#123;</span><br><span class="line">                        <span class="comment">// limit: 40 * 1024 </span></span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            ]</span><br><span class="line">        &#125;,</span><br><span class="line">        ]</span><br><span class="line">    &#125;,</span><br><span class="line">    devServer: &#123;</span><br><span class="line">        <span class="comment">// 服务器额外的静态文件, 如打开的是http://localhost:3002 加入public下有a.txt index.html, 就可以通过 http://localhost:3002/a.txt(index.html) 访问这个静态资源了   </span></span><br><span class="line">        contentBase: resolve(<span class="string">'public'</span>),</span><br><span class="line">        <span class="comment">// publicPath: 'assets', // 打包后的资源的访问基址  加入打包生成的文件夹dist下, 有main.js, index.html, 那么通过http://localhost:3002/assets/main.js访问, 不写默认是 /</span></span><br><span class="line">        open: <span class="literal">true</span>, <span class="comment">// 自动打开网页</span></span><br><span class="line">        compress: <span class="literal">true</span>, <span class="comment">// 开启压缩</span></span><br><span class="line">        host: <span class="string">'localhost'</span>, <span class="comment">// 域名</span></span><br><span class="line">        port: <span class="number">3002</span>, <span class="comment">// 端口</span></span><br><span class="line">        writeToDisk: <span class="literal">false</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins: [</span><br><span class="line">        <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">            template: resolve(<span class="string">'public'</span>, <span class="string">'index.html'</span>),</span><br><span class="line">            filename: <span class="string">'index.html'</span></span><br><span class="line">        &#125;),</span><br><span class="line">        <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">            filename: <span class="string">'index.css'</span></span><br><span class="line">        &#125;),</span><br><span class="line">        + <span class="keyword">new</span> CleanWebpackPlugin()</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



</li>
</ol>

    </div>

    
    
    

      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/webpack/2020/11/25/webpack-basic/webpack%E5%AE%9A%E4%B9%89/" rel="prev" title="webpack-basic/webpack定义">
      <i class="fa fa-chevron-left"></i> webpack-basic/webpack定义
    </a></div>
      <div class="post-nav-item">
    <a href="/webpack/2020/12/08/webpack-basic/loader%E5%8A%A0%E8%BD%BD/" rel="next" title="webpack-basic/loader加载">
      webpack-basic/loader加载 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  

  </div>


          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#快速上手"><span class="nav-number">1.</span> <span class="nav-text">快速上手</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#自动产出html"><span class="nav-number">1.1.</span> <span class="nav-text">自动产出html</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#支持css-scss-less"><span class="nav-number">1.2.</span> <span class="nav-text">支持css, scss, less</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#配置开发服务器"><span class="nav-number">1.3.</span> <span class="nav-text">配置开发服务器</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#支持图片"><span class="nav-number">1.4.</span> <span class="nav-text">支持图片</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#分离css"><span class="nav-number">1.5.</span> <span class="nav-text">分离css</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#支持打包前清除dist目录"><span class="nav-number">1.6.</span> <span class="nav-text">支持打包前清除dist目录</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">HC</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/webpack/archives/">
        
          <span class="site-state-item-count">3</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">HC</span>
</div>
  <div class="powered-by">Powered by <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> v4.2.1
  </div>
  <span class="post-meta-divider">|</span>
  <div class="theme-info">Theme – <a href="https://muse.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> v7.7.2
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/webpack/lib/anime.min.js"></script>
  <script src="/webpack/lib/velocity/velocity.min.js"></script>
  <script src="/webpack/lib/velocity/velocity.ui.min.js"></script>

<script src="/webpack/js/utils.js"></script>

<script src="/webpack/js/motion.js"></script>


<script src="/webpack/js/schemes/muse.js"></script>


<script src="/webpack/js/next-boot.js"></script>




  















  

  

</body>
</html>
